<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>订单确认</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="keywords" content="订单确认">
    <meta name="description" content="订单确认">
    <script type="text/javascript" src="js/base.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="css/theme-chalk/index.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"> -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="js/jquery.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/html2canvas.min.js" charset="UTF-8"></script> -->
    <script type="text/javascript" src="js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/axios.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="js/elementui.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/swiper-bundle.min.js" charset="UTF-8"></script> -->
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<body>
    <div class="wrapperbox confirmpage hasmenu" id="app" v-if="loaded==true">
        <div class="timeout">
            <p><span>支付剩余时间：<em>{{showTime.hh}}</em> <em>{{showTime.mm}}</em> <em>{{showTime.ss}}</em></span></p>
        </div>
        <div class="confirm">
            <div class="probuct">
                <div class="row">
                    <div class="img"><img :src="proData.product_cover_image" alt=""></div>
                    <div class="text">
                        <!-- <h3>好物优选 | 金龙鱼玉米油非订转基因4升</h3> -->
                        <!-- <p><em>￥</em>96.8</p> -->
                        <h3>{{proData.product_title}}</h3>
                        <p><em>￥</em>{{proData.order_amount/proData.quantity}}</p>
                    </div>
                </div>
                <div class="bot">
                    <p><em>套餐：</em><span>{{proData.spec_name}}</span></p>
                    <div class="number">
<!--                        <span :class="['icon jian',{'disabled': quantity==1}]" @click="jianquantity"><i class="el-icon-minus"></i></span>-->
                        <em>{{proData.quantity}}</em>
<!--                        <span :class="['icon add',{'disabled': quantity==proData.order_limit}]" @click="addquantity"><i class="el-icon-plus"></i></span>-->
                    </div>
                </div>
            </div>
            <div class="user">
                <h3>用户信息</h3>
                <div class="list">
                    <div class="input"><span>姓名：</span><input type="text" disabled v-model="name" placeholder="请填写姓名"></div>
                    <div class="input"><span>手机号：</span><input type="text" disabled v-model="mobile" placeholder="请填写手机号"></div>
                </div>
            </div>
            <div :class="['label label1',{'checked': isAgree==true}]">
                <div class="checkbox" @click="checkxy"><i class="el-icon-check" v-if="isAgree==true"></i></div>
                <p>我已阅读并同意用户退款协议及<a href="./xieyi.html">《平台用户服务协议》</a></p>
            </div>
            <div class="label">
                <p>用户退款协议：此商品为限时限量特惠团单，为防止资源浪费，请您在有效期内及时消费。如需退款，有效期内收取20%的违约金，如已过使用时间则视为放弃使用，将自动作废。非个人原因导致无法使用可全额退款</p>
            </div>
        </div>
        <div class="zhifubotmenu">
            <div class="fl"><span>合计金额：</span><h5><em>￥</em>{{proData.order_amount}}</h5></div>
            <div class="btn" @click="gosuborder">去支付</div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data () {
            return {
                id:'',
                proData:'',
                specsSelect:'',
                name:'',
                mobile:'',
                allowclick:true,
                quantity:1,
                isAgree:true,
                jine:'',
                user_info:{},
                showTime: {},
                getTime:null,
                loaded:false,
            }
        },
        mounted () {
            
            var that=this;
            that.id=getUrlParam("id");
            that.getdata();
            var user_info=JSON.parse(getCookie("user_info"));
            if(!user_info){
            }else{
                that.user_info=user_info;
                that.mobile=user_info.mobile;
                that.name=user_info.nickname;
            }
        },
        methods: {
            getTimeList(){
                var that = this;
                that.getTime=setInterval(function(){
                    var arr=that.showTime;
                    if (arr.time > 0) {
                        arr.time-=1000;
                        // var dd = Math.floor(arr[i].time / 1000 / 60 / 60 / 24);
                        var hh = Math.floor((arr.time / 1000 / 60 / 60) % 24);
                        var mm = Math.floor((arr.time / 1000 / 60) % 60);
                        var ss = Math.floor((arr.time / 1000) % 60);
                        if(0<=hh && hh<10){ hh='0'+hh }else if(hh<0){hh='00'}
                        if(0<=mm && mm<10){ mm='0'+mm }else if(mm<0){mm='00'}
                        if(0<=ss && ss<10){ ss='0'+ss }else if(ss<0){ss='00'}
                        arr["hh"] = hh;
                        arr["mm"] = mm;
                        arr["ss"] = ss;
                    }else{
                        clearInterval(that.getTime);
                        // arr[i]["dd"] = 0;
                        arr["hh"] = '00';
                        arr["mm"] = '00';
                        arr["ss"] = '00';
                        layer.msg('支付已超时，请重新购买',{time:'2000'});
                        setTimeout(()=>{
                            window.location.href = './order.html';
                        },2000)

                    }
                    that.showTime=arr;
                },1000);
            },
            getdata:function(){
                var that=this;
                // 获取订单详情
                client_get('orders/'+that.id).then(res => {
                    console.log(res)
                    that.proData=res;
                    that.proData.order_limit=5;
                    that.jine=that.specsSelect.sale_price;
                    var time=0;
                    if(res.auto_cancel_time){
                        res.auto_cancel_time=res.auto_cancel_time.replace(/-/g,'/');
                        time=new Date(res.auto_cancel_time).getTime()- new Date().getTime();
                    }
                    var hh='00',mm='00',ss='00';
                    if(time>0){
                        hh = Math.floor((time / 1000 / 60 / 60) % 24);
                        mm = Math.floor((time / 1000 / 60) % 60);
                        ss = Math.floor((time / 1000) % 60);
                        if(0<=hh && hh<10){ hh='0'+hh }else if(hh<0){hh='00'}
                        if(0<=mm && mm<10){ mm='0'+mm }else if(mm<0){mm='00'}
                        if(0<=ss && ss<10){ ss='0'+ss }else if(ss<0){ss='00'}
                    }
                    that.showTime={'time':time,/*'dd':dd,*/'hh':hh,'mm':mm,'ss':ss};
                    that.getTimeList();
                    that.loaded=true;
                })
            },
            jianquantity:function(){
                var that=this; 
                if(that.quantity>=2){
                    that.quantity-=1;
                    that.jine=Number(that.specsSelect.sale_price)*Number(that.quantity);
                }
            },
            addquantity:function(){
                var that=this;
                if(that.quantity<that.proData.order_limit){
                    that.quantity+=1;
                    that.jine=Number(that.specsSelect.sale_price)*Number(that.quantity);
                }
            },
            checkxy:function(){
                var that=this;
                that.isAgree=!that.isAgree;
            },
            gosuborder:function(){
                var that=this;
                var name=that.name;
                var mobile=that.mobile;
                var checkmobile=/^1(3|4|5|6|7|8|9)\d{9}$/;  
                layer.closeAll();
                if(that.isAgree!=true){
                    layer.msg('请勾选并同意退款协议');
                    return false;
                }
                client_get('orders/'+that.id+'/payment_params',).then(res => {
                    function onBridgeReady() {
                        WeixinJSBridge.invoke('getBrandWCPayRequest', {
                                "appId": res.payment.appId,     //公众号ID，由商户传入
                                "timeStamp": res.payment.timeStamp,     //时间戳，自1970年以来的秒数
                                "nonceStr": res.payment.nonceStr,      //随机串
                                "package": res.payment.package,
                                "signType": res.payment.signType,     //微信签名方式：
                                "paySign": res.payment.paySign
                            },
                            function(res) {
                                if (res.err_msg == "get_brand_wcpay_request:ok") {
                                    // 使用以上方式判断前端返回,微信团队郑重提示：
                                    window.location.href='./buyed.html?id='+that.id;
                                }
                            });
                    }
                    if (typeof WeixinJSBridge == "undefined") {
                        if (document.addEventListener) {
                            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                        } else if (document.attachEvent) {
                            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                        }
                    } else {
                        onBridgeReady();
                    }
                })
            },

        }
    });
</script>
</html>